"use client";

import { v4 as uuidv4 } from "uuid";
import { useEffect } from "react";
import Add from "./add";
import Edit from "./edit";
import Icon from "../_component/icon";
import { allDriver, deleteDriver } from "../action/driver";
import { AlertInfo } from "../_component/alert";
import { useState } from "react";
const column = ["序号", "名称", "备注"];

export default function DriverTable() {
  const [select, SetSelect] = useState(null);
  const [drivers, SetDrivers] = useState(null);
  const [alert, SetAlert] = useState(null);
  const [driver, SetDriver] = useState(null);

  const updateDrivers = async () => {
    const updateDrivers = await allDriver();
    SetDrivers(updateDrivers);
  };

  const deleteEvent = () => {
    if (select === null) {
      showAlert("请选择一个驱动");
      return;
    }

    deleteDriver(select);
    updateDrivers();
  };

  useEffect(() => {
    updateDrivers();
  }, []);

  const showDialog = (name) => {
    closeAlert();
    const modal_dialog = document.getElementById(name);

    if (!modal_dialog) {
      return;
    }

    if (!modal_dialog.open) {
      modal_dialog && modal_dialog.showModal();
    } else {
      modal_dialog.removeAttribute("open");
      modal_dialog.show();
    }
  };

  const showAlert = (info) => {
    const alert = document.getElementById("driver_alert");

    if (alert) {
      SetAlert(info);
      alert.classList.remove("hidden");
    }
  };

  const selectEvent = (id) => {
    SetSelect(id);

    closeAlert();

    // 获取当前选择的驱动信息
    const driver = drivers.find((item) => item.id === id);
    if (driver) {
      SetDriver(driver);
    }
  };

  const closeAlert = () => {
    const alert = document.getElementById("driver_alert");
    if (alert && !alert.classList.contains("hidden")) {
      alert.classList.add("hidden");
    }
  };

  const showEdit = () => {
    if (select) {
      SetSelect(select);
      showDialog("edit_modal");
    } else {
      // 检查是否已经选择了驱动
      showAlert("请选择一个驱动");
    }
  };

  return (
    <div>
      <dialog id="add_modal" className="modal">
        <Add refresh={updateDrivers} />
      </dialog>
      <dialog id="edit_modal" className="modal">
        <Edit driver={driver} refresh={updateDrivers} />
      </dialog>
      <section className="card bg-base-100 col-span-12 mt-2 overflow-hidden p-4 shadow-sm xl:col-span-7">
        <div className="card-body grow-0">
          <div className="flex justify-between gap-2">
            <h2 className="grow ">
              <div className="flex flex-col gap-1">
                <span className="card-title text-2xl">路由驱动</span>
                <span className="text-sm text-gray-400">
                  每个路由有不同的驱动来解析协议
                </span>
              </div>
            </h2>
            <button className="btn btn-sm">
              <Icon name="refresh" color="none" />
            </button>
            <button
              className="btn btn-sm"
              onClick={() => showDialog("add_modal")}
            >
              <Icon name="add" color="none" />
            </button>

            <button className="btn btn-sm" onClick={() => deleteEvent()}>
              <Icon name="delete" color="none" />
            </button>

            <button className="btn btn-sm" onClick={() => showEdit()}>
              <Icon name="edit" color="none" />
            </button>
          </div>
        </div>

        <div id="driver_alert" className="hidden">
          <AlertInfo alert={alert} />
        </div>

        <div className="overflow-x-aut4 m-4">
          {drivers && (
            <table className="table-pin-rows table-pin-cols table">
              <thead>
                <tr>
                  {column.map((item) => (
                    <th key={uuidv4()}>{item}</th>
                  ))}
                </tr>
              </thead>
              <tbody>
                {drivers &&
                  drivers.map((item) => (
                    <tr
                      key={item.id}
                      onClick={() => selectEvent(item.id)}
                      className={select === item.id ? "bg-base-200" : ""}
                    >
                      <td>{item.id}</td>
                      <td>{item.name}</td>
                      <td>{item.memo}</td>
                    </tr>
                  ))}
              </tbody>
            </table>
          )}
        </div>
      </section>
    </div>
  );
}
